.input {
	position: relative;
	display: inline-flex;
	align-items: stretch;
	background: $input-bg-color;
	border: $input-border-width solid $input-border-color;
	border-radius: $input-border-radius;
	outline: none;

	&::after {
		content: "";
		position: absolute;
		bottom: -1px;
		left: 0;
		height: $input-focus-stripe-width;
		width: 100%;
		background-color: $input-focus-stripe-color;
		border-radius: 1rem;
		transform: scale3d(0, 0, 1);
		transition: transform .15s ease-out;
	}

	&__el {
		display: block;
		background: transparent;
		width: 100%;
		padding: $input-padding-y $input-padding-x;
		border: 0;

		&:focus {
			outline: none;
		}
	}

	&__el::placeholder {
		font-weight: 400;
		color: $input-placeholder-color;
		opacity: 1;
	}

	&__adornment {
		display: flex;
		align-items: center;
		color: $input-adornment-color;

		&--start {
			margin-left: $input-padding-x;
		}

		&--end {
			margin-right: $input-padding-x;

			& > *:not(:last-of-type) {
				margin: 0;
				margin-right: $input-padding-x;
			}
		}
	}

	&--focused:not(&--disabled) {
		&::after {
			transform: scale3d(1, 1, 1);
		}
	}

	&--disabled {
		background-color: $input-disabled-bg-color;
		color: darken($input-disabled-bg-color, 20%);
	}

	&--full-width {
		width: 100%;
		min-width: 0;
	}

	&:not(&--full-width) {
		width: 100%;
		max-width: $input-default-width;
	}

	&--error {
		&::after {
			background-color: $color-red;
			transform: scale3d(1, 1, 1);
		}
	}

	&__btn-icon {
		&:last-of-type {
			margin: 0;
		}
	}
}
